<template>
  <div class="hello">
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="gender" label="性别"  />
      <el-table-column prop="age" label="年龄"  />
      <el-table-column prop="hobby" label="爱好"  />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          <el-button link type="primary" @click="handleEdit(scope.$index, scope.row)" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script>
import apiHttp from "@/api/user";
import { mapState } from "vuex";

import { ref, reactive, toRefs, onMounted  } from "vue";

export default {
  name: "Home",
  setup(props, context) {
    // console.log(props, context, 111111)
    const title = ref("标题");
    const state = reactive({
      username: "admin",
      password: "123456",
      list: [],
      token: mapState(["token"]),
      tableheaderList: [
        {name: "姓名", id: 0},
        {name: "性别", id: 1},
        {name: "年龄", id: 2},
        {name: "爱好", id: 3},
        {name: "操作", id: 4}
      ]
    })
    onMounted(async() => {
      await methods.getList();
    })
    const methods = {
      async getList(){
        await apiHttp.userList().then(res=>{
          state.list = res.data;
        });
        
      },
      submit(){
        apiHttp.req({username: state.username, password: state.password}).then(res => {
          // console.log(res, 111)
        })
      }
    }

    return {
      title, ...toRefs(state), ...methods
    }
  }
  // computed: {
  //  ...mapState(['token'])
  // },
  // data () {
  //   return {
  //     username: "",
  //     password: null
  //   }
  // },
  // methods: {
  //    submit() {
  //     axios({
  //       headers: {Authorization: this.token ? "Bearer " + this.token : "" },
  //       method: "POST",
  //       url: `http://127.0.0.1:3333/reg`,
  //       data: {
  //         username: this.username,
  //         password: this.password
  //       }
  //     }).then(res => {
  //       console.log(res,111111)
  //     })
  //    }   
  // }
}
</script>